進行專案常需要把從API獲取的資訊轉成陣列，把陣列裡的每項物件資料，用迴圈套在元件上，依序渲染多個元件呈現在畫面上。

React中利用map()這個函式，把為原本資料陣列的每一個元素進行變更後，回傳新的迴圈陣列。

產生迴圈陣列

我們來寫一個菜單當範例：

在Menu.js裡先準備一個菜單的陣列資料

const dateList = [
	{id:1,food:'雞排漢堡'},
	{id:2,food:'炒飯'},
	{id:3,food:'牛肉麵'}
]

使用map()，將原本陣列裡的物件轉成子元件或jsx語法的迴圈陣列。

Array.map((item)=>{ ... })

• Array：原始資料陣列
• item：自訂名稱的參數（要改成value、data隨自己開心），代表陣列裡的元素項目
• ...：要使用的子元件 or jsx語法

使用元件

/* List子元件 */
function List(prop){
    return(
    <li key={prop.id}>
      {prop.food}
    </li>)
  }

//元件
dateList.map((item)=> <List key={item['id']} food={item.food} />)

使用jsx語法

//jsx語法，不用設List元件的function了

dateList.map((item)=> <li key={item.id}> {item.food} </li> )

在父元件中寫入迴圈

成功使用map()產生新陣列後，我們有兩個寫法可以將這迴圈加入父元件中

父元件的function

function Menu(){
    return(
    <div>
        <h1>方法一菜單</h1>
        <ul className="wrapper">
            { dateList.map((item)=>{ return <List key={item['id']} food={item.food} />})}
        </ul>
        <h1>方法二菜單</h1>
        <ul className="wrapper">
            {  menu }
        </ul>
    </div>
    )
}

寫法一：在父元件的JSX中進行迴圈

function Menu(){
    return(
    <div>
        <h1>菜單</h1>
        <ul className="wrapper">
            { dateList.map((item)=> <List key={item['id']} food={item.food} />)}
        </ul>
    </div>
    )
}

//這裡直接用子元件進行迴圈

寫法二：宣告變數接迴圈陣列，在父元件中使用變數渲染

//宣告變書
const menuItem = dateList.map((item)=> <li key={item.id}>{item.food}</li> )

function Menu(){
    return(
    <div>
        <h1>菜單</h1>
        <ul className="wrapper">
            { menuItem }      
        </ul>
    </div>
    )
}

//這裡用jsx語法進行迴圈

最後一個很重要的重點：

一定要在迴圈的產生每個DOM標籤上加上key屬性

dateList.map((item)=> <List key={item['id']} food={item.food} />)
														 ↑
												 key一定要加

key 是作為 React 分辨哪些項目被改變、增加或刪除的辨別碼，同個迴圈陣列裡的每個key不可以有重複的。

最好是使用在原本陣列裡加上不重複的id或其他只有單一的值來當key。如果原本陣列沒有可以當key的項目，可以使用map提供的每個物件索引參數index。

const menuItem = dateList.map((item,index)=> <li key={index}>{item.food}</li> )

但較不建議使用index索引做key，因為當操作對陣列進行變動，項目的順序是會改變，這會對效能產生不好的影響，也可能會讓 component state 產生問題。

下面是這邊的範例code

import React from 'react'
import './Menu.css'

const dateList = [{id:1,food:'雞排漢堡'},{id:2,food:'炒飯'},{id:3,food:'牛肉麵'}]

function List(prop){
    return(
    <li key={prop.id}>
      {prop.food}
    </li>)
  }

//宣告變數
// const menu = dateList.map((item)=>{ return <List key={item['id']} food={item.food} />})

//or 純jsx語法
const menuItem = dateList.map((item)=>{ 
    return <li key={item.id}>{item.food}</li> })

function Menu(){
 
    return(
    <div>
        <h1>寫法一菜單</h1>
        <ul className="wrapper">
            { dateList.map((item)=> <List key={item['id']} food={item.food} />)}
        </ul>
        <h1>寫法二菜單</h1>
        <ul className="wrapper">
            {  menuItem }
        </ul>
    </div>
    )
}

export default Menu;